import React, { useState, useEffect } from 'react';
import "./index.less"

const ContentWithStyledTOC = ({ apiUrl }) => {
    const [content, setContent] = useState('');
    const [toc, setToc] = useState([]);

    useEffect(() => {
        const fetchContent = async () => {
            try {
                // const response = await axios.get(apiUrl);
                setContent(" <h1 id=\"-\">一级目录</h1>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h2 id=\"-1\">二级目录1</h2>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h3 id=\"-1\">三级目录1</h3>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h1 id=\"-\">一级目录</h1>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <br>\n" +
                    "        <h4 id=\"-1\">四级目录1</h4>\n" +
                    "\n" +
                    "        <h5 id=\"-5\">五级目录</h5>\n" +
                    "        <p>11</p>");
            } catch (error) {
                console.error('Failed to fetch content:', error);
            }
        };

        fetchContent();
    }, [apiUrl]);

    useEffect(() => {
        if (content) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(content, 'text/html');
            const headings = doc.querySelectorAll('h1, h2, h3, h4, h5, h6');
            let stack = []; // Stack to keep track of parent list items
            const tocArray = Array.from(headings).reduce((acc, heading) => {
                const level = parseInt(heading.tagName[1], 10);
                const id = heading.id;
                const label = heading.textContent.trim();
                const menuItem = { id, label, level };

                while (stack.length > level - 1) {
                    stack.pop();
                }
                const parent = stack.length > 0 ? stack[stack.length - 1] : null;
                if (parent) {
                    parent.children = parent.children || [];
                    parent.children.push(menuItem);
                } else {
                    acc.push(menuItem);
                }
                stack.push(menuItem);

                return acc;
            }, []);

            setToc(tocArray);
        }
    }, [content]);

    const renderTOC = (toc) => (
        <ul className="toc-list">
            {toc.map(item => (
                <li key={item.id}>
                    <a href={`#${item.id}`}>{item.label}</a>
                    {item.children && item.children.length > 0 && renderTOC(item.children)}
                </li>
            ))}
        </ul>
    );

    return (
        <div style={{  display: 'flex', flexDirection: 'row' ,width:'100%'}}>
            <div className="content-container" >
                {/* 这里可以添加一个滚动容器来显示内容 */}
                <div dangerouslySetInnerHTML={{ __html: content }} />
            </div>
            <div className="toc-container" style={{ width: 200, overflowY: 'auto' }}>
                {renderTOC(toc)}
            </div>
        </div>
    );
};
export default ContentWithStyledTOC;